<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>区块链管理平台</title>
		<!-- Custom fonts for this template -->
		<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		 rel="stylesheet">
		<!-- Custom styles for this template -->
        <link href="css/sb-admin-2.min.css" rel="stylesheet">
        <link rel="icon" href="img/zfsoft.ico">
		<!-- Custom styles for this page -->
		<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/element.css">
	</head>
	<body id="page-top">

		<!-- Page Wrapper -->
		<div id="wrapper">

			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas" >
							<img src="/img/zfsoft.ico" width="40" height="40"/>
						</i>
					</div>
					<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<!-- Nav Item - Dashboard -->
				<li class="nav-item">
					<a class="nav-link" href="introduce.html">
						<i class="fas fa-fw fa-folder"></i>
						<span>使用向导</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="index.html">
						<i class="fas fa-fw fa-tachometer-alt"></i>
						<span>系统概览</span></a>
				</li>

				<!-- Divider -->
				<hr class="sidebar-divider">

				<!-- Heading -->
				<div class="sidebar-heading">
					管理配置
				</div>

				<!-- Nav Item - Pages Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="host.html">
						<i class="fas fa-fw fa-cog"></i>
						<span>主机管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item active">
					<a class="nav-link collapsed" href="organizations.html">
						<i class="fas fa-fw fa-wrench"></i>
						<span>组织管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="channel.html" aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-chart-area"></i>
						<span>通道管理</span>
					</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link collapsed" href="net.html">
                      <i class="fas fa-fw fa-table"></i>
                      <span>网络管理</span>
                    </a>
                  </li>            

			</ul>
			<!-- End of Sidebar -->

			<!-- Content Wrapper -->
			<div id="content-wrapper" class="d-flex flex-column">

				<!-- Main Content -->
				<div id="content">

					<!-- Topbar -->
					<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

						<!-- Sidebar Toggle (Topbar) -->
						<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
							<i class="fa fa-bars"></i>
						</button>

						<ul class="navbar-nav ml-auto">

							<div class="topbar-divider d-none d-sm-block"></div>

							<!-- Nav Item - User Information -->
							<li class="nav-item dropdown no-arrow">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
									<img class="img-profile rounded-circle" src="../img/admin.jpg">
								</a>
								<!-- Dropdown - User Information -->
								<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="../login.html">
										<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
										退出
									</a>
								</div>
							</li>

						</ul>

					</nav>
					<!-- End of Topbar -->

					<!-- Begin Page Content -->
					<div class="container-fluid">
						<el-form :model="org" :rules="rules" ref="org" label-width="100px" class="demo-org">
							<!-- Page Heading -->
							<h1 class="h2 mb-2 text-gray-800">组织管理</h1>
							<h2 class="h6 mb-2 text-gray-800">创建的组织，是构成区块链网络的基本单元，在一个区块链网络中必须包含两种类型的组织，分别是“peer”类型和“orderer”类型，“orderer”类型的组织所包含的主机为交易排序。“peer”类型的组织可以根据实际需求自行定义，一个组织可以是一个公司、机关单位或社会团体，也可以是更小规模的集体，如：部门。</h2>
							<div style="text-align: left;;;margin-bottom: 20px;">
								<el-button type="primary" @click="open('org')">添加</el-button>
							</div>
							<template>
								<el-table :data="tableData" style="width: 100%">
									<el-table-column prop="name" label="名字" width=":10%">
									</el-table-column>
									<el-table-column prop="domain" label="域名" width=":20%">
									</el-table-column>
									<el-table-column prop="type" label="组织类型" width=":10%">
									</el-table-column>
									<el-table-column prop="host" label="主机" width=":20%">
									</el-table-column>

									<el-table-column label="操作">
										<template slot-scope="scope">
											<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
										</template>
									</el-table-column>

								</el-table>
							</template>
							<el-dialog title="添加" :visible.sync="dialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false">

								<el-form-item label="组织名称" prop="name">
									<el-input  v-model="org.name" placeholder="给组织起个名字,如Org1、Org2"></el-input>
								</el-form-item>
								<el-form-item label="域名" prop="domain">
									<el-input v-model="org.domain" placeholder="例如example.com"></el-input>
								</el-form-item>
								<el-form-item label="选择类型" prop="type">
									<el-select v-model="org.type" placeholder="请选择类型">
										<el-option label="peer" value="peer"></el-option>
										<el-option label="orderer" value="orderer"></el-option>
									</el-select>
								</el-form-item>
								</el-form-item>
								<el-form-item label="主机" prop="host">
									<el-checkbox-group v-model="org.host">
										<el-checkbox :label="data.label" v-for="data in checkArr" ></el-checkbox>
									</el-checkbox-group>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('org')" >立即创建</el-button>
									<el-button  @click="resetForm('org')">重置</el-button>
								</el-form-item>
							</el-dialog>
						</el-form>
					</div>

				</div>
				<footer class="sticky-footer bg-white">
					<div class="container my-auto">
						<div class="copyright text-center my-auto">
							<span>Copyright &copy; 卓繁信息 2020</span>
						</div>
					</div>
				</footer>

			</div>

		</div>
		<a class="scroll-to-top rounded" href="#page-top">
			<i class="fas fa-angle-up"></i>
		</a>
		<!-- Bootstrap core JavaScript-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

		<!-- Core plugin JavaScript-->
		<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

		<!-- Custom scripts for all pages-->
		<script src="js/sb-admin-2.min.js"></script>

		<!-- Page level plugins -->
		<script src="vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

		<!-- Page level custom scripts -->
		<script src="js/demo/datatables-demo.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="js/element.js"></script>
		<script>
			var vue = new Vue({
				el: '#wrapper',
				data(){
					var nameLimit = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入组织名称'));
						} else {
							const name= /^[a-zA-Z0-9]*$/
							if (name.test(value)) {
								callback();
							}else{
								callback(new Error('请输入正确的组织名称 仅字母和数字可用'));
							}

						}
					};
					var domainLimit = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入域名'));
						} else {
							const name= /^[a-zA-Z0-9.]*$/
							if (name.test(value)) {
								callback();
							}else{
								callback(new Error('请输入正确的域名 仅字母和数字及.可用'));
							}

						}
					};
					return {
						currentPage3: 1,
						dialogVisible: false,
						tableData: [],
						checkArr:[],
						org: {
							name: '',
							domain: '',
							type: '',
							host: []
						},
						rules: {
							name: [{
								required: true,
								validator: nameLimit,
								trigger: 'blur'
							}],
							domain: [{
								required: true,
								validator: domainLimit,
								trigger: 'blur'
							}],
							type: [{
								required: true,
								message: '请选择类型',
								trigger: 'change'
							}],
							host: [{
								required: true,
								message: '请至少选择一个主机',
								trigger: 'change'
							}],
						}
					}
				},
				mounted() {
					var _this = this;
					axios.post('/deploy/orgList')
							.then(function(res) {
								_this.tableData = res.data;
								for(i=0;i<res.data.length;i++){
									_this.tableData[i].host=res.data[i].hosts.join(",")
								}
							})
							.catch(function(error) {
								alert(error)
							})
				},
				methods: {
					handleDelete(index, row) {
						console.log(index, row);
						var _this = this;
						_this.$confirm('确认删除, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.post('/deploy/delOrg', _this.tableData[index])
									.then(function (res) {
										// alert("删除成功")
										window.location.reload()
									})
						}).catch(() => {

						});
					},
					handleClose(done) {
						this.dialogVisible = false;
						window.location.reload()
					},
					submitForm(formName) {
						console.log(this.$refs[formName])
						this.$refs[formName].validate((valid) => {
							if (valid) {
								var _this = this;
								axios({
									headers:{
										'Content-Type': 'application/json'
									},
									method:'post',
									url:'/deploy/addOrg',
									data:JSON.stringify(_this.org)
								}).then(function(res) {
									alert(res.data.data)
									window.location.reload()
								}).catch(function(error) {
									alert(error)
								})
							}else{
								console.log(valid)
								console.log('error submit!!');
								return false;
								}
							});
					},
					open(formName) {
						this.$refs[formName].resetFields();
						this.dialogVisible = true;
						var _this = this;

						_this.checkArr.push({label:'h1'})
						_this.checkArr.push({label:'h2'})
						// axios.post('/deploy/hostList')
						// 		.then(function(res) {
						// 			for(i=0;i<res.data.length;i++){
						// 				_this.checkArr.push({label:''})
						// 				_this.checkArr[i].label=res.data[i].mark;
						// 			}
						// 		})
						// 		.catch(function(error) {
						// 			alert(error)
						// 		})
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					}
				},
				computed: {
					nameMonitor() {
						return this.org.name;
					}
				},
				watch: {
					nameMonitor(val) {
						
					}
				},
			})
		</script>
	</body>

</html>
